<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>导航栏</title>
	<meta name="description" content="水平方向的导航栏,单项有选中,鼠标经过效果" />
	<link rel="stylesheet" type="text/css" href="css/global_121024_uncompress.css">
	<link rel="stylesheet" type="text/css" href="css/global_FE.css">
</head>
<body>
<h1>导航栏结构及样式</h1>
<h2>导航栏一</h2>
<p class="note"><em>note:导航栏为1个元素,固定高宽;单项为1个元素,固定高宽,单项之间的距离可以调整;鼠标经过时有变化,a标签区域和容器顶部距离可以调整</em></p>
<style type="text/css">
/* s:.nav_container_1 */
.nav_container_1 { width:800px; height:28px; background-color: #0266a3;}
.nav_container_1 ul { padding-left: 10px;}
.nav_container_1 li { float:left; width: 80px; margin-right: 5px; padding-top: 5px; font-size:14px; text-align:center;}
.nav_container_1 li a { display:inline-block; width:100%; height:23px; color: #fff; background-color: #0f7cbf; line-height: 23px;}
.nav_container_1 .cur a,.nav_container_1 li a:hover { color: #fff; background-color: #2993D6; }
</style>
<div class="nav_container_1">
	<ul class="clrfix">
    	<li><a title="" href="#">首页</a></li>
    	<li class="cur"><a title="" href="#">拍卖会</a></li>
    	<li><a title="" href="#">本地生活</a></li>
    	<li><a title="" href="#">会员俱乐部</a></li>
    	<li><a title="" href="#">facebook</a></li>
    </ul>
</div>
<div class="item">
	<p>html:</p>
	<code>
		<pre>
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
		</pre>
	</code>
</div>

<h2>导航栏二</h2>
<p class="note"><em>note:导航栏为1个元素,高宽不固定;单项为1个元素,高度固定,宽自适应,单项之间的距离可以调整;鼠标经过时有变化,a标签区域和容器顶部距离可以调整</em></p>
<style type="text/css">
/* s:.nav_container_1 */
.nav_container_2 { background-color: #446e09;}
.nav_container_2 ul { padding-left: 10px;}
.nav_container_2 li { float:left; margin-right: 5px; padding-top: 5px; font-size:14px; text-align:center;}
.nav_container_2 li a { display:inline-block; padding: 0 10px; height:23px; color: #fff; background-color: #58831C; line-height: 23px;}
.nav_container_2 .cur a,.nav_container_2 li a:hover { color: #fff; background-color: #6A982C; }
</style>
<div class="nav_container_2">
	<ul class="clrfix">
    	<li><a title="" href="#">首页</a></li>
    	<li class="cur"><a title="" href="#">拍卖会</a></li>
    	<li><a title="" href="#">本地生活</a></li>
    	<li><a title="" href="#">会员俱乐部</a></li>
    	<li><a title="" href="#">facebook</a></li>
    </ul>
</div><div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>

<h2>导航栏三</h2>
<p class="note"><em>note:导航栏为2个元素,高度固定,宽度可调整;单项为1个元素,高宽固定,单项之间的距离可以调整;鼠标经过时有变化,a标签区域和容器顶部距离可以调整</em></p>
<style type="text/css">
/* s:.nav_container_3 */
.nav_container_3 { width:800px; background:#0076BC url(images/nav_0301.jpg) top left no-repeat;}
.nav_container_3 .nav_content { height: 39px; margin-left: 20px; padding-right: 20px; background:#0076BC url(images/nav_0301.jpg) top right no-repeat;}
.nav_container_3 li { float:left; margin-right: 5px; padding-top: 5px; font-size:14px; text-align:center;}
.nav_container_3 li a { display:inline-block; width:90px; height:34px; color: #fff; line-height: 34px; cursor: pointer;}
.nav_container_3 .cur a,.nav_container_3 li a:hover { background: #fff url(images/nav_0303.png) no-repeat; color: #666;}
</style>
<div class="nav_container_3">
	<div class="nav_content">
		<ul class="clrfix">
	    	<li><a title="" href="#">首页</a></li>
	    	<li class="cur"><a title="" href="#">拍卖会</a></li>
	    	<li><a title="" href="#">本地生活</a></li>
	    	<li><a title="" href="#">会员俱乐部</a></li>
	    	<li><a title="" href="#">facebook</a></li>
	    </ul>
	</div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>


<h2>导航栏四</h2>
<p class="note"><em>note:导航栏为2个元素,高度固定,宽度可调整;单项为2个元素,高度固定,宽度自适应,单项之间的距离可以调整;鼠标经过时有变化,a标签区域和容器顶部距离可以调整</em></p>
<style type="text/css">
/* s:.nav_container_4 */
.nav_container_4 { width:800px; background:#0076BC url(images/nav_0301.jpg) top left no-repeat;}
.nav_container_4 .nav_content { height: 39px; margin-left: 20px; padding-right: 20px; background:#0076BC url(images/nav_0301.jpg) top right no-repeat;}
.nav_container_4 li { float:left; margin-right: 5px; padding-top: 5px; font-size:14px; text-align:center;}
.nav_container_4 li a { display:inline-block;}
.nav_container_4 li span { display:inline-block; height:34px; margin-left: 10px; padding-right: 10px; color: #666; line-height: 34px; color:#fff; cursor: pointer;}
.nav_container_4 .cur a,.nav_container_4 li a:hover { background: #fff url(images/nav_0303.png) top left no-repeat;}
.nav_container_4 .cur span,.nav_container_4 li a:hover span { background:#fff url(images/nav_0303.png) top right no-repeat; color: #666;}


</style>
<div class="nav_container_4">
	<div class="nav_content">
		<ul class="clrfix">
	    	<li><a title="" href="#"><span>首页</span></a></li>
	    	<li class="cur"><a title="" href="#"><span>拍卖会</span></a></li>
	    	<li><a title="" href="#"><span>本地生活</span></a></li>
	    	<li><a title="" href="#"><span>会员俱乐部</span></a></li>
	    	<li><a title="" href="#"><span>facebook</span></a></li>
	    </ul>
	</div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>

<h2>导航栏五</h2>
<p class="note"><em>note:导航栏为3个元素,高度固定,宽度可调整,中间元素背景水平循环平铺;单项为2个元素,高度固定,宽度自适应,单项之间的距离可以调整;鼠标经过时有变化,a标签区域和容器顶部距离可以调整</em></p>
<style type="text/css">
/* s:.nav_container_5 */
.nav_container_5 { width:800px; background:#0076BC url(images/nav_0301.jpg) top left no-repeat;}
.nav_container_5 .nav_content { height: 39px; margin-left: 10px; padding-right: 10px; background:#0076BC url(images/nav_0301.jpg) top right no-repeat;}
.nav_container_5 .nav_body { height: 39px; background:#0076BC url(images/x.jpg) top right repeat-x;}

.nav_container_5 li { float:left; margin-right: 5px; padding-top: 5px; font-size:14px; text-align:center;}
.nav_container_5 li a { display:inline-block;}
.nav_container_5 li span { display:inline-block; height:34px; margin-left: 10px; padding-right: 10px; color: #fff; line-height: 34px; cursor: pointer;}
.nav_container_5 .cur a,.nav_container_5 li a:hover { background: #fff url(images/nav_0303.png) top left no-repeat;}
.nav_container_5 .cur a span,.nav_container_5 li a:hover span { background:#fff url(images/nav_0303.png) top right no-repeat; color: #666;}

</style>
<div class="nav_container_5">
	<div class="nav_content">
		<div class="nav_body">
			<ul class="clrfix">
		    	<li><a title="" href="#"><span>首页</span></a></li>
		    	<li class="cur"><a title="" href="#"><span>拍卖会</span></a></li>
		    	<li><a title="" href="#"><span>本地生活</span></a></li>
		    	<li><a title="" href="#"><span>会员俱乐部</span></a></li>
		    	<li><a title="" href="#"><span>facebook</span></a></li>
		    </ul>
	    </div>
	</div>
</div>
<div class="code_item">
	<p>html:</p>
	<code>
		<pre>
			
		</pre>
	</code>
	<p>css:</p>
	<code>
		<pre>
			
		</pre>
	</code>
</div>

</body>
</html>